import React, { Component } from 'react'
import { connect } from 'react-redux'
import { NavBar, Icon } from 'antd-mobile';
import {InitState} from '../types/index'
import {RouteComponentProps} from 'react-router-dom'
import LazyLoad from 'react-lazyload';
// 18、认认真真排版样式精准，可以通过色块代替
import '../css/index.scss'
interface Props extends InitState,RouteComponentProps {
    changeInd(index:number):void
    goDetail(id:string):void
}
interface State {
    
}

export class Classfind extends Component<Props, State> {
    state = {}
    // 14、点击商品跳转详情页，未加载完成显示默认图片，加载失败裂图展示?
    goDetail=(id:string)=>{
        this.props.history.push(`/detail/${id}`)
    }
    render() {
        const {list,ind} = this.props        
        return (
            <div className='classfind'>
                <div className='find_head'>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.props.history.replace('/')}
                    >奇趣分类</NavBar>
                </div>
                <div className='find_main'>
                    <ul>
                        {
                            list.map((item,index)=>{
                                
                                return <li key={index} onClick={()=>this.props.changeInd(index)}
                                            className={ind===index?'active':''}
                                                >
                                                {item.title}
                                       </li>
                            })
                        }
                        
                    </ul>
                    <div className='listmain'>
                    <div className='text'>
                        <p>
                        {
                            this.props.list[this.props.ind].title
                        }
                        </p>
                        <p>
                            各种风格软装装点你的家
                        </p>
                    </div>
                    {/* 13、实现分类页面多级数据渲染，优化页面响应速度及裂图展示 */}
                {
                    this.props.list[this.props.ind] && this.props.list[this.props.ind].children.map((item,index)=>{
                        return <dl key={index} onClick={()=>this.goDetail(item.id)}>
                            <dt>
                            <LazyLoad height={200} overflow>
                                <img src={item.img} alt="" />
                                </LazyLoad>
                            </dt>
                            <dd>
                                <p>{item.title}</p>
                                <span>￥{item.price}元</span>
                            </dd>
                        </dl>
                    })
                }
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state:Props) => ({
    list:state.list,
    ind:state.ind
})

const mapDispatchToProps = (dispatch:Function)=>({
    changeInd:(index:number)=>dispatch({type:'GET_CHANGE_IND',index})
})

export default connect(mapStateToProps, mapDispatchToProps)(Classfind)
